# CSS3 Multiple Columns

« Previous
Next Chapter »

## CSS3 Multiple Columns

With CSS3, you can create multiple columns for laying out text - like in newspapers!

In this chapter you will learn about the following multiple column properties:

- column-count
- column-gap
- column-rule

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property |  |  |  |  |
--- | --- | --- | --- | --- | ---
column-count | 10.0 | 4.0 -webkit- | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1
column-gap | 10.0 | 4.0 -webkit- | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1
column-rule | 10.0 | 4.0 -webkit- | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1

## CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into:

## Example

Divide the text in a <div> element into three columns:

div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Try it yourself »

## CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:

## Example

Specify a 40 pixels gap between the columns:

div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Try it yourself »

## CSS3 Column Rules

The column-rule property sets the width, style, and color of the rule between columns.

## Example

Specify the width, style and color of the rule between columns:

div {
-webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 3px outset #ff00ff; /* Firefox */
column-rule: 3px outset #ff00ff;
}
Try it yourself »

## CSS3 Multiple Columns Properties

The following table lists all the multiple columns properties:

Property | Description | CSS
--- | --- | ---
column-count | Specifies the number of columns an element should be divided into | 3
column-fill | Specifies how to fill columns | 3
column-gap | Specifies the gap between the columns | 3
column-rule | A shorthand property for setting all the column-rule-* properties | 3
column-rule-color | Specifies the color of the rule between columns | 3
column-rule-style | Specifies the style of the rule between columns | 3
column-rule-width | Specifies the width of the rule between columns | 3
column-span | Specifies how many columns an element should span across | 3
column-width | Specifies the width of the columns | 3
columns | A shorthand property for setting column-width and column-count | 3

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples